import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/home'
import About from '@/components/about'
import document from '@/components/document'
import noFound from '@/components/noFound'
import study from '@/views/study'
import hobby from '@/views/hobby'
import work from '@/views/work'
import slider from '@/views/slider'
import user from '@/components/user'
Vue.use(VueRouter)
let router = new VueRouter({
  mode: 'history',  // 路由的跳转方式，默认为hash(带有#号)。为history则没有#号,,在低版本浏览器中可以用hash模式，高版本中一般使用history模式
  linkActiveClass: 'is-active',  // 设置全局模式下选中元素的类名，默认是router-link-active(当前路由与to的目标路径相同时)
  scrollBehavior (to, from, savePostion) { //  在点击浏览器的前进后退或切换导航时触发
   //  to要进入的目标路由对象，from离开的路由对象，savePostion记录滚动条的坐标(savePostion只有在点击前进后退的时候才记录数据)
    // if (savePostion) {  //  这样可以达到在前进后退页面时自动让滚动条到之前浏览页面时的位置
    //   return savePostion
    // } else {
    //   return {x: 0, y: 0}
    // }
    if (to.hash) {
      return {
        selector: to.hash  //  根据当前路由的hash值自动定位到渲染组件中id为hash的文档位置（即：跳转锚点）
      }
    }
  },
  routes: [{
    path: '/home',  // 根路径
    name: 'Home',  // 路由名称，可以方便在其它地方使用
    component: Home, // 根路径下需要显示的组件
    alias: '/index', // 别名，在访问/index时也是渲染的Home组件，且路由不会变成/home
    meta: {
      index: 0, // 在路由信息中可以使用meta来配置一些自定义数据，再通过$route.meta来访问
      title: 'home'
    }
  }, {
    path: '/about',  // 以 / 开头的路径都是相对于根路径的
    // name: 'About',  //在设置了默认子路由的情况下，就不要给父级设置name了，否则vue会发出警告，可以把name设在默认子路由身上
    component: About,
    beforeEnter (to, from, next) {  //  单个路由中定义钩子函数，beforeEnter表示在进入 /about路由之前执行这个函数
      next()
    },
    children: [{  // 配置子路由，即在About组件下还可以设置子组件,渲染的位置则就为About组件下的router-view下
      path: '',  //  设置默认的子路由，当访问about的时候对应study下的内容会默认渲染出来（让默认的子路由为空）,渲染出来的路径为 / about
      component: study,
      name: 'About',
      meta: {
        index: 2, //  在有默认子路由时要将meta设置在默认子路由身上
        title: 'study'
      }
    }, {
      // path: 'hobby', //  相对于about，/about/hobby
      path: '/hobby',  // 相对于根路径的路由，/hobby
      component: hobby,
      name: 'Hobby'
    }, {
      // path: 'work',
      path: '/work',
      component: work,
      name: 'Work'
    }]
  }, {
    path: '/user/:tip?/:userId?', // tip和userId是一个动态路径，如：/user/vip/abc,那么userId就是abc,tip就是vip,其后加？号代表userId和tip可以有也可以没有，即：/user和  /user/vip/abc和 /user/vip等路由匹配到的组件都是user
    component: user,
    meta: {
      index: 3,
      title: 'user'
    }
  }, {
    path: '/document',
    meta: {
      index: 1,
      login: true,  //  一个标识，只有登录了才能进入到document里面
      title: 'document'
    },
    components: {
      default: document,  //  当有App.vue中有多个router-view时，设置document组件渲染到没有起名字的router-view 中
      slider: slider // key的slider代表的是App.vue中name为slider的router-view,value的slider代表的是要渲染的slider组件
    }
  }, {
    path: '*', //  *通配符，在已配置外的路由下的其它路由，即：没有匹配到的路由使用noFound组件
    // component: noFound, //  使用noFound组件
    // redirect: '/home'  //  重定向，没有匹配到的路由跳转到/home下，即显示Home组件
    // redirect: {path: '/home'} // 使用对象的形式进行重定向
    // redirect: {name: 'Home'} //  使用路由名称的形式进行重定向
    redirect: (to) => {  //  动态设置重定向的目标，to代表当前的路由信息对象
      if (to.path === '123') {
        return '/about'
      } else if (to.path === '456') {
        return '/document'
      } else {
        return {name: 'Home'}
      }
    }
  }]
})
//  这是全局路由钩子，只要切换路由就会调用这些函数
// router.beforeEach( (to, from, next) => {  //  在每一个路由切换之前都会执行这个函数
  // next()  //  next代表的是进入到路由里面渲染组件，如果不写，那么组件将不能正常渲染
  //  next( false)  //  给定false参数，router-view下的组件也不会显示
//   if (to.meta.login) {
//     next('/login')   //  如果目标路由需要登录，那么就跳转到  /login路由下
//   } else {
//     next()
//   }
// })
// router.afterEach( (to, from) => {  //  在切换到每一个路由之后
//   if (to.meta.title) {
//     window.document.title = to.meta.title
//   } else {
//     window.document.title = 'vue-cli'
//   }
// })
export default router